import { styled } from '../stitches.config';

export const Badge = styled('span', {
  // Reset
  alignItems: 'center',
  appearance: 'none',
  borderWidth: '0',
  boxSizing: 'border-box',
  display: 'inline-flex',
  flexShrink: 0,
  fontFamily: 'inherit',
  justifyContent: 'center',
  lineHeight: '1',
  verticalAlign: 'middle',
  outline: 'none',
  padding: '0',
  textDecoration: 'none',
  userSelect: 'none',
  WebkitTapHighlightColor: 'rgba(0,0,0,0)',
  '&:disabled': {
    backgroundColor: '$slate3',
    pointerEvents: 'none',
    color: '$slate8',
  },
  '&::before': {
    boxSizing: 'border-box',
    content: '""',
  },
  '&::after': {
    boxSizing: 'border-box',
    content: '""',
  },

  // Custom
  backgroundColor: '$slate3',
  borderRadius: '$pill',
  color: '$slate11',
  whiteSpace: 'nowrap',
  fontVariantNumeric: 'tabular-nums',

  variants: {
    size: {
      '1': {
        height: '$4',
        px: '$1',
        fontSize: '$1',
      },
      '2': {
        height: '$5',
        px: '$2',
        fontSize: '$2',
      },
    },
    variant: {
      gray: {
        backgroundColor: '$slate3',
        color: '$slate11',
        '&:focus': {
          boxShadow: 'inset 0 0 0 1px $colors$slate8, 0 0 0 1px $colors$slate8',
        },
      },
      red: {
        backgroundColor: '$red3',
        color: '$red11',
        '&:focus': {
          boxShadow: 'inset 0 0 0 1px $colors$red8, 0 0 0 1px $colors$red8',
        },
      },
      crimson: {
        backgroundColor: '$crimson3',
        color: '$crimson11',
        '&:focus': {
          boxShadow: 'inset 0 0 0 1px $colors$crimson8, 0 0 0 1px $colors$crimson8',
        },
      },
      pink: {
        backgroundColor: '$pink3',
        color: '$pink11',
        '&:focus': {
          boxShadow: 'inset 0 0 0 1px $colors$pink8, 0 0 0 1px $colors$pink8',
        },
      },
      purple: {
        backgroundColor: '$purple3',
        color: '$purple11',
        '&:focus': {
          boxShadow: 'inset 0 0 0 1px $colors$purple8, 0 0 0 1px $colors$purple8',
        },
      },
      violet: {
        backgroundColor: '$violet3',
        color: '$violet11',
        '&:focus': {
          boxShadow: 'inset 0 0 0 1px $colors$violet8, 0 0 0 1px $colors$violet8',
        },
      },
      indigo: {
        backgroundColor: '$indigo3',
        color: '$indigo11',
        '&:focus': {
          boxShadow: 'inset 0 0 0 1px $colors$indigo8, 0 0 0 1px $colors$indigo8',
        },
      },
      blue: {
        backgroundColor: '$blue3',
        color: '$blue11',
        '&:focus': {
          boxShadow: 'inset 0 0 0 1px $colors$blue8, 0 0 0 1px $colors$blue8',
        },
      },
      cyan: {
        backgroundColor: '$cyan3',
        color: '$cyan11',
        '&:focus': {
          boxShadow: 'inset 0 0 0 1px $colors$cyan8, 0 0 0 1px $colors$cyan8',
        },
      },
      teal: {
        backgroundColor: '$teal3',
        color: '$teal11',
        '&:focus': {
          boxShadow: 'inset 0 0 0 1px $colors$teal8, 0 0 0 1px $colors$teal8',
        },
      },
      green: {
        backgroundColor: '$green3',
        color: '$green11',
        '&:focus': {
          boxShadow: 'inset 0 0 0 1px $colors$green8, 0 0 0 1px $colors$green8',
        },
      },
      lime: {
        backgroundColor: '$lime3',
        color: '$lime11',
        '&:focus': {
          boxShadow: 'inset 0 0 0 1px $colors$lime8, 0 0 0 1px $colors$lime8',
        },
      },
      yellow: {
        backgroundColor: '$yellow3',
        color: '$yellow11',
        '&:focus': {
          boxShadow: 'inset 0 0 0 1px $colors$yellow8, 0 0 0 1px $colors$yellow8',
        },
      },
      orange: {
        backgroundColor: '$orange3',
        color: '$orange11',
        '&:focus': {
          boxShadow: 'inset 0 0 0 1px $colors$orange8, 0 0 0 1px $colors$orange8',
        },
      },
      gold: {
        backgroundColor: '$gold3',
        color: '$gold11',
        '&:focus': {
          boxShadow: 'inset 0 0 0 1px $colors$gold8, 0 0 0 1px $colors$gold8',
        },
      },
      bronze: {
        backgroundColor: '$bronze3',
        color: '$bronze11',
        '&:focus': {
          boxShadow: 'inset 0 0 0 1px $colors$bronze8, 0 0 0 1px $colors$bronze8',
        },
      },
    },
    interactive: {
      true: {},
    },
  },

  compoundVariants: [
    {
      interactive: true,
      variant: 'red',
      css: {
        '@hover': {
          '&:hover': {
            backgroundColor: '$red4',
          },
        },
        '&:active': {
          backgroundColor: '$red5',
        },
        '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
          backgroundColor: '$red5',
        },
      },
    },
    {
      interactive: true,
      variant: 'crimson',
      css: {
        '@hover': {
          '&:hover': {
            backgroundColor: '$crimson4',
          },
        },
        '&:active': {
          backgroundColor: '$crimson5',
        },
        '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
          backgroundColor: '$crimson5',
        },
      },
    },
    {
      interactive: true,
      variant: 'pink',
      css: {
        '@hover': {
          '&:hover': {
            backgroundColor: '$pink4',
          },
        },
        '&:active': {
          backgroundColor: '$pink5',
        },
        '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
          backgroundColor: '$pink5',
        },
      },
    },
    {
      interactive: true,
      variant: 'purple',
      css: {
        '@hover': {
          '&:hover': {
            backgroundColor: '$purple4',
          },
        },
        '&:active': {
          backgroundColor: '$purple5',
        },
        '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
          backgroundColor: '$purple5',
        },
      },
    },
    {
      interactive: true,
      variant: 'violet',
      css: {
        '@hover': {
          '&:hover': {
            backgroundColor: '$violet4',
          },
        },
        '&:active': {
          backgroundColor: '$violet5',
        },
        '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
          backgroundColor: '$violet5',
        },
      },
    },
    {
      interactive: true,
      variant: 'indigo',
      css: {
        '@hover': {
          '&:hover': {
            backgroundColor: '$indigo4',
          },
        },
        '&:active': {
          backgroundColor: '$indigo5',
        },
        '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
          backgroundColor: '$indigo5',
        },
      },
    },
    {
      interactive: true,
      variant: 'blue',
      css: {
        '@hover': {
          '&:hover': {
            backgroundColor: '$blue4',
          },
        },
        '&:active': {
          backgroundColor: '$blue5',
        },
        '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
          backgroundColor: '$blue5',
        },
      },
    },
    {
      interactive: true,
      variant: 'cyan',
      css: {
        '@hover': {
          '&:hover': {
            backgroundColor: '$cyan4',
          },
        },
        '&:active': {
          backgroundColor: '$cyan5',
        },
        '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
          backgroundColor: '$cyan5',
        },
      },
    },
    {
      interactive: true,
      variant: 'teal',
      css: {
        '@hover': {
          '&:hover': {
            backgroundColor: '$teal4',
          },
        },
        '&:active': {
          backgroundColor: '$teal5',
        },
        '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
          backgroundColor: '$teal5',
        },
      },
    },
    {
      interactive: true,
      variant: 'green',
      css: {
        '@hover': {
          '&:hover': {
            backgroundColor: '$green4',
          },
        },
        '&:active': {
          backgroundColor: '$green5',
        },
        '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
          backgroundColor: '$green5',
        },
      },
    },
    {
      interactive: true,
      variant: 'lime',
      css: {
        '@hover': {
          '&:hover': {
            backgroundColor: '$lime4',
          },
        },
        '&:active': {
          backgroundColor: '$lime5',
        },
        '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
          backgroundColor: '$lime5',
        },
      },
    },
    {
      interactive: true,
      variant: 'yellow',
      css: {
        '@hover': {
          '&:hover': {
            backgroundColor: '$yellow4',
          },
        },
        '&:active': {
          backgroundColor: '$yellow5',
        },
        '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
          backgroundColor: '$yellow5',
        },
      },
    },
    {
      interactive: true,
      variant: 'orange',
      css: {
        '@hover': {
          '&:hover': {
            backgroundColor: '$orange4',
          },
        },
        '&:active': {
          backgroundColor: '$orange5',
        },
        '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
          backgroundColor: '$orange5',
        },
      },
    },
    {
      interactive: true,
      variant: 'gold',
      css: {
        '@hover': {
          '&:hover': {
            backgroundColor: '$gold4',
          },
        },
        '&:active': {
          backgroundColor: '$gold5',
        },
        '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
          backgroundColor: '$gold5',
        },
      },
    },
    {
      interactive: true,
      variant: 'bronze',
      css: {
        '@hover': {
          '&:hover': {
            backgroundColor: '$bronze4',
          },
        },
        '&:active': {
          backgroundColor: '$bronze5',
        },
        '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
          backgroundColor: '$bronze5',
        },
      },
    },
  ],
  defaultVariants: {
    size: '1',
    variant: 'gray',
  },
});
